---
import type { HTMLTag, Polymorphic } from 'astro/types';
import type { SignOutOptions, Without } from '@clerk/shared/types';
import type { ButtonProps } from '../../types';
import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';

type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignOutOptions & ButtonProps<Tag>>;

import { generateSafeId } from '@clerk/astro/internal';

const safeId = generateSafeId();

if ('as' in Astro.props) {
  logAsPropUsageDeprecation();
}

const { as: Tag = 'button', asChild, redirectUrl = '/', sessionId, ...elementProps } = Astro.props;

let htmlElement = '';

if (asChild) {
  htmlElement = await Astro.slots.render('default');
  htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
}
---

{
  asChild ? (
    <Fragment set:html={htmlElement} />
  ) : (
    <Tag
      {...elementProps}
      data-clerk-unstyled-id={safeId}
    >
      <slot>Sign out</slot>
    </Tag>
  )
}

<script is:inline define:vars={{ redirectUrl, sessionId, safeId }}>
  const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);

  btn.addEventListener('click', () => {
    window.Clerk.signOut({ redirectUrl, sessionId });
  });
</script>
